<template>
  <Modal
      title="导出模板数据"
      id="export-template"
      v-model="visible"
      :append-to-body="true"
      :width="1000"
  >
      <Input readonly ref="myEditor"
             type="textarea" :value="editorJson"/>
    <span slot="footer">
      <Button @click="visible = false" icon="md-close">取消</Button>
      <Button type="primary" @click="handleExportJson" icon="md-checkmark">确定</Button>
    </span>
  </Modal>
</template>
<script>

export default {
  name: 'ExportTemplate',
  data() {
    return {
      visible: false,
      editorJson: '',
      fileFormat:'txt',
    };
  },

  components: {},
  methods: {
    init(data) {
      this.visible = true;
      this.$nextTick(() => {
        this.editorJson = JSON.stringify(data, null, '\t');
      });

    },
    handleCancel() {
      this.visible = false;
    },
    exportData(data, fileName = `表单模板模板数据.${this.fileFormat}`) {
      let content = 'data:text/csv;charset=utf-8,';
      content += data;
      var encodedUri = encodeURI(content);
      var actions = document.createElement('a');
      actions.setAttribute('href', encodedUri);
      actions.setAttribute('download', fileName);
      actions.click();
    },
    handleExportJson() {
      this.exportData(this.editorJson);
      this.$Message.success({
        background: true,
        content: '模板数据导出成功',
        duration: this.$config.duration,
      });
      this.visible=false;
    },
  },
};
</script>
<style lang="less" scoped>
#export-template::v-deep textarea{
  height:442px;
}
#export-template::v-deep textarea::-webkit-scrollbar {
  width: 4px;
  background-color: #fff;
}

#export-template::v-deep textarea::-webkit-scrollbar-thumb {
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
  background-color: #e8eaec;
}

#export-template::v-deep textarea::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
  border-radius: 2px;
  background-color: #fff;
}
</style>
